<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org" lang="en">

<head>

</head>

<body tiles:fragment="content">
<div>
		<h5>
			<a href='#' th:href="@{/consultaAprobacionProgramacion}"
			 th:text="#{aprobarProgramacion.consulta}">Consulta de Programaciones</a>		 
			> 
			<span th:text="#{aprobarProgramacion.aprobacion}" >Aprobación de Programación</span>
		</h5>
		<hr />
		
		<h2>
			<p th:text="#{programarSolicitudes.titulo}">Información de Solicitud</p>
		</h2>


		<div class="notice" th:if="${flagPlazoTerminado}">
			<img th:src="@{/resources/static/images/aviso.gif}" alt="warning"/>
            <span th:text="#{aprobarProgramacion.plazoTerminado}">La aprobación se está llevando fuera de plazo, por lo que la fecha de entrega podría variar.</span>            
        </div>
        
		<div>   
		        <fieldset>				
					<div class="span-8">
						<label th:text="#{programarSolicitudes.numero}">Número de Solicitud </label>
						<input type="text" th:value="${solicitud.id}" disabled="true"/>
					</div>
					<div class="span-8 last">
						<label th:text="#{programarSolicitudes.tipoRequerimiento}">Tipo de requerimiento </label>
						<input type="text" th:value="${solicitud.tipoRequerimiento.nombre}" disabled="true"/>
					</div>
					<div class="span-8">
						<label th:text="#{programarSolicitudes.fechaRegistro}" >Fecha de registro</label>
						<input type="text" th:value="${#dates.format(solicitud.fechaRegistro, #messages.msg('date.format'))}" disabled="true" />
					</div>					
					<div class="span-8 last">
						<label th:text="#{programarSolicitudes.fechaEntrega}">Fecha solicitada de entrega </label>
						<input type="text" th:value="${#dates.format(solicitud.fechaEsperada, #messages.msg('date.format'))}" disabled="true"/>
					</div>
					
					<div class="span-8 last">
						<label th:text="#{aprobarProgramacion.resultado.fechaEstimada}">Fecha estimada de entrega </label>
						<input type="text" th:value="${#dates.format(solicitud.fechaEstimadaEntrega, #messages.msg('date.format'))}" disabled="true"/>
					</div>
				</fieldset>
				
				<div id="tabs">
				  <ul>
				    <li th:each="fase : ${solicitud.fases}"><a href="#tabs-1" th:href="'#'+ ${fase.id}" th:text="${fase.nombre}">Fase X</a></li>				      
				  </ul>
				  <div th:each="fase : ${solicitud.fases}">	
					 <div th:id="${fase.id}" class="container">		
						<div class="span-8">
							<label th:text="#{programarSolicitudes.horasFase}">Total de horas estimadas </label>
							<label th:text="${fase.esfuerzoEstimado}">30</label>
							<br/>
						</div>
						<div class=" success span-8 last">
							<label th:text="#{programarSolicitudes.competenciaFase}" >Competencias Relacionadas</label>
						 <ul>
						    <li th:each="competencia : ${fase.competencias}" th:text= "${competencia.nombre}" >Fase X</li>				      
						 </ul>						 
						</div>						
					  </div>
				  </div>		
				</div>								
				
		</div>
		<form action="#" th:object="${fechas}" th:action="@{/registrarSolicitud}"
				method="post">
                  <span th:text="${fechas}">titulo</span><br/>	
		</form>
		
				<form name="aprobarProgramacion" action="#" th:object="${solicitud}" th:action="@{/aprobarProgramacion}" method="post">
				<input type="hidden"  th:value="${flagPlazoTerminado}" name="flagPlazoTerminado" />
				<input type="hidden"  th:field="*{id}" name="idSolicitud" />
				<script th:inline="javascript">
					//<![CDATA[
					  $(function() {
					    $( "#aprobar" ).dialog({
					      autoOpen: false,
					      resizable: false,
					      height:250,
					      width: 400,
					      draggable: false,
					      modal: true,
					      buttons: {
					        "Si": function() {
					        	document.aprobarProgramacion.submit();
	
					        },
					        "No": function() {
					          $( this ).dialog( "close" );
					        }
					      }
					    });
					    $( "#openerAprobar" ).click(function() {
					        $( "#aprobar" ).dialog( "open" );
					      });
					  });
					//]]>
				</script>
				<div id="aprobar" th:title="#{aprobarProgramacion.aprobarTitulo}">
					<p th:text="#{aprobarProgramacion.aprobarWarning}" >Procederá a aprobar la programación para su atención (ya no hay vuelta atrás!). ¿Está seguro?</p>
					<div th:if="${flagPlazoTerminado}">
						<img th:src="@{/resources/static/images/miniWarning.gif}" alt="warning"/>
						<span class="alt" th:text="#{aprobarProgramacion.aprobarFueraPlazoWarning}">La fecha de entrega podría cambiar debido a que la aprobación está fuera de plazo</span>
					</div>
					
				</div>						
											
 				<button type="button" id="openerAprobar" class="button success" th:value="#{aprobarProgramacion.botonAprobar}">Aprobar programacion</button> 				
 				</form>
 				
 				<form name="observarProgramacion" action="#" th:object="${solicitud}" th:action="@{/observarProgramacion}" method="post">
				<input type="hidden"  th:field="*{id}" name="idSolicitud" />
				<textarea style="display:none;" th:field="*{comentariosReprogramacion}" id="comentariosR"/>
				<script th:inline="javascript">
					//<![CDATA[
					  $(function() {
					    $( "#observar" ).dialog({
					      autoOpen: false,
					      resizable: false,
					      height:400,
					      width: 450,
					      draggable: false,
					      modal: true,
					      buttons: {
					        "Aceptar": function() {
					        	document.observarProgramacion.submit();
	
					        },
					        "Cancelar": function() {
					          $( this ).dialog( "close" );
					        }
					      }
					    });
					    $( "#openerObservar" ).click(function() {
					        $( "#observar" ).dialog( "open" );
					      });
					  });
					  
					  function updateInput(ish){
						    document.getElementById("comentariosR").value = ish;
						}
					//]]>
				</script>
				<div id="observar" th:title="#{aprobarProgramacion.observarTitulo}">
					<p th:text="#{aprobarProgramacion.observarWarning}" >Procederá a devolver la estimación propuesta para revisión. ¿Está seguro?</p>
					<span th:text="#{aprobarProgramacion.observaciones}">Ingrese las observaciones del caso </span><br/>
					<textarea onchange="updateInput(this.value)" />
				</div>						
											
 				<button type="button" id="openerObservar" th:value="#{aprobarProgramacion.botonObservar}">Observar programacion</button> 				
 				</form>
						
<!-- 				observaciones -->

				<form name="rechazarProgramacion" action="#" th:object="${solicitud}" th:action="@{/rechazarProgramacion}" method="post">	
				<input type="hidden"  th:field="*{id}" name="idSolicitud" />
				<script th:inline="javascript">
					//<![CDATA[
					  $(function() {
					    $( "#rechazar" ).dialog({
					      autoOpen: false,
					      resizable: false,
					      height:200,
					      width: 350,
					      draggable: false,
					      modal: true,
					      buttons: {
					        "Si": function() {
					        	document.rechazarProgramacion.submit();
	
					        },
					        "No": function() {
					          $( this ).dialog( "close" );
					        }
					      }
					    });
					    $( "#openerRechazar" ).click(function() {
					        $( "#rechazar" ).dialog( "open" );
					      });
					  });
					//]]>
				</script>
				<div id="rechazar" th:title="#{aprobarProgramacion.rechazarTitulo}">
					<p th:text="#{aprobarProgramacion.rechazarWarning}" >Si rechaza la programación la solicitud será cancelada. ¿Está seguro?</p>
				</div>						
											
 				<button type="button" class="button negative" id="openerRechazar" th:value="#{aprobarProgramacion.botonRechazar}">Rechazar programacion</button> 				
 				</form>
 				
				<form th:action="@{/consultaAprobacionProgramacion}" >
					<button type="submit" th:value="#{programarSolicitudes.botonVolver}">Volver</button>
				</form>	
	</div>
</body>

</html>
